
			
            <div>
             <ul class="breadcrumb">
          	<li><a href="<?php echo HOME; ?>"><i class="fa fa-home"></i> Home</a></li>
            <li><a href="<?php echo HOME ?>user/upload">Upload</a></li>
          </ul>

            <div class='head_nav'><span class="icon-picture"></span> HÌNH ẢNH KHÓ ĐỠ</div>
            <div class="user_profile">
				
				<div class="row" >
					<div class="col-md-12 ">
						<div id="contentIndex" class="col-md-12">
				
										
										<div role="dialog" id="modalAlertBox" class="modal fade" style="display: none;">
											<div class="modal-dialog modal-wide">
												<div class="modal-content">
													<div class="modal-header">
														<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
														<h4 class="modal-title"></h4>
													</div>
											        <div class="modal-body">
														
														<div style="clear:both"></div>
											        </div>
												</div><!-- /.modal-content -->
											</div>
										</div>
										
										<div id="wrapLoadMoreItems">
											<div class="normalLoadBtn" id="loadMoreItems"><img width="20" alt="loading" src="public/images/loading.gif"> Loading </div><br>
										</div>
										<div class="formLoading"></div>
										
									
									    
									    <div class="generalError" style="display: none;"></div>
									    <form id="fileupload" class="userPostForm" role="form" method="post" enctype="multipart/form-data">
											
					
											<div class="form-group">
												<div class="row">
                                                <div class="col-md-2">
												<label for="txtTitle">Tiêu đề</label>
                                                </div>
                                                <div class="col-md-10">
												<input type="text" class="form-control" id="txtTitle" placeholder="Nhập tiêu đề...">
                                                </div>
                                                </div>
											</div>
											
											<div class="form-group">
												<div class="row">
                                                <div class="col-md-2">
												<label for="txtDescription">Giới thiệu</label>
                                                </div>
                                                <div class="col-md-10">
												<textarea class="form-control" placeholder="Nhập mô tả..." id="txtDescription" rows="5"></textarea>
												</div>
                                                </div>
                                            </div>
												  <input type="hidden" name="txtCat" id="txtCat" value="2" /> 
											<?php /* if($data['categories']):?>
											<div class="form-group">
                                            	<div class="row">
                                                <div class="col-md-2">
												<label for="txtCat">Chọn danh mục</label>
                                                </div>
                                                <div class="col-md-10">
												<!-- <select id="txtCat" class="myNormalSelect">
													<?php foreach($data['categories'] as $value): ?>
													<option value="<?= $value['id']; ?>"><?= $value['name'] ?></option>	
													<?php endforeach; ?> 
												</select>-->
												<?php echo cmsSelect('txtCat', null, $data['categories'], array('class'=>'myNormalSelect')); ?>
                                                </div>
                                                </div>
											</div>
											<?php endif; */?>
											
											<div class="form-group">
                                            	<div class="row">
                                                <div class="col-md-2">
												<label for="txtAlbum">Chọn Playlist</label>
                                                </div>
                                                <div class="col-md-10">
												<select id="txtAlbum" class="myNormalSelect">
                                                <option value="">Tùy Chọn Playlist</option>	
													<?php if($data['albums']):?>
													<?php foreach($data['albums'] as $value): ?>
													<option value="<?= $value['id']; ?>"><?= $value['name'] ?></option>	
													<?php endforeach; ?>
													<?php endif;?>
												</select>
												
												<button type="submit" class="btn btn-sm createAlbum">
							                    	<i class="glyphicon glyphicon-plus"></i>
								                    <span>Tạo Playlist mới</span>
								                </button>
                                                </div>
                                                </div>
											</div>
											<br />
                                            
                                       
                                          <div class="jumbotron">  
											<!-- Redirect browsers with JavaScript disabled to the origin page -->
									        <noscript><input type="hidden" name="redirect" value="http://blueimp.github.io/jQuery-File-Upload/"></noscript>
									        <!-- The fileupload-buttonbar contains buttons to add/delete files and start/cancel the upload -->
									        <div class="fileupload-buttonbar">
									            <div>
									                <!-- The fileinput-button span is used to style the file input field as button -->
									                <span class="btn btn-success fileinput-button">
									                    <i class="glyphicon glyphicon-plus"></i>
									                    <span>Tìm ảnh...</span>
									                    <input type="file" name="files[]" multiple accept="image/*">
									                </span>
									                
									                <button type="submit" class="btn btn-primary start">
									                    <i class="glyphicon glyphicon-upload"></i>
									                    <span>Upload hình</span>
									                </button>
									                <!-- The loading indicator is shown during file processing -->
									                <span class="fileupload-loading"></span>
									            </div>
									            <!-- The global progress information -->
									            <div class="fileupload-progress fade">
									                <!-- The global progress bar -->
									                <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100">
									                    <div class="progress-bar progress-bar-success" style="width:0%;"></div>
									                </div>
									                <!-- The extended global progress information -->
									                <div class="progress-extended">&nbsp;</div>
									            </div>
									        </div><!-- end .fileupload-buttonbar -->
									        
									        <!-- The table listing the files available for upload/download -->
									        <table role="presentation" class="table table-striped"><tbody class="files"></tbody></table>
									   		<div><div id="uploadedFile"></div></div>
											<!-- <div class="form-group">
												<div class="field_error" id="txtImage_error"></div>
												<label for="txtImage">Chọn hình:</label>
												<input type="file" id="txtImage">
											</div><br /> -->
                                            
                                           </div> <!-- End of class jumbotron - wrap upload file -->
                                           
                                                
                                            <div class="row"> <!-- Start class row wrap upload image and submit button -->
                                            <div class="col-md-2">
                                            </div>
                                            <div class="col-md-10">
											<button type=submit class="btn btn-primary mySubmit" id="submitImage">
							                    <i class="glyphicon glyphicon-hand-up"></i>
							                    <span>Đăng bài</span>
							                </button>
                                            </div> <!-- End of class col-md-10 wrap upload image and submit button -->
                                            </div><!-- End of class row wrap upload image and submit button -->
											
										</form>
				
						</div><!-- end #contentIndex -->
					</div>
					
					
				</div> <!-- End of row -->
			</div><!-- end wrap_1024 -->
	
		
<!-- end #wrapMain -->		
		
<script id="template-upload" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
    <tr class="template-upload fade">
        <td>
            <span class="preview"></span>
        </td>
        <td>
            <p class="name">{%=file.name%}</p>
            {% if (file.error) { %}
                <div><span class="label label-danger">Error</span> {%=file.error%}</div>
            {% } %}
        </td>
        <td>
            <p class="size">{%=o.formatFileSize(file.size)%}</p>
            {% if (!o.files.error) { %}
                <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"><div class="progress-bar progress-bar-success" style="width:0%;"></div></div>
            {% } %}
        </td>
        <td>
            {% if (!o.files.error && !i && !o.options.autoUpload) { %}
                <button class="btn btn-primary start">
                    <i class="glyphicon glyphicon-upload"></i>
                    <span>Start</span>
                </button>
            {% } %}
            {% if (!i) { %}
                <button class="btn btn-warning cancel">
                    <i class="glyphicon glyphicon-ban-circle"></i>
                    <span>Cancel</span>
                </button>
            {% } %}
        </td>
    </tr>
{% } %}
</script>

<script type="text/javascript">
	$(document).ready(function(){
		
		$('#fileupload').fileupload({
			
			maxNumberOfFiles: 5,
	        // Uncomment the following to send cross-domain cookies:
	        //xhrFields: {withCredentials: true},
	      	
	      	url: '<?= IMAGE_URL ?>image/index.php',
	      	//url: 'http://localhost//test/jqueryupload/images/image/index.php',
	      	progressall: function (e, data) {
	            var progress = parseInt(data.loaded / data.total * 100, 10);
	            $('.progress-bar').css(
	                'width',
	                progress + '%'
	            ).text(progress + '%');
	      	},
			
	      	success: function(data){setImageName(data);}
	        
	    });
		
		$('#fileupload').bind('fileuploaddestroy', function (e, data) {
			resultFileObj = parseQueryString(data.url);
			resultFile = resultFileObj.file;
			$('#fileupload > input:hidden').each(function(){
				if ($(this).val() == resultFile)  {
			        $(this).remove();
			    }
			});
	    });
		
		function parseQueryString(url) {
		    var queryStringIdx = url.indexOf('?');
		    var pairs = url.substr(queryStringIdx + 1)
		                   .split('&')
		                   .map(function(p) { return p.split('='); });
		    var result = { };
		    for (var i = 0; i < pairs.length; i++) {
		        result[decodeURIComponent(pairs[i][0])] = decodeURIComponent(pairs[i][1]);
		    }

		    return result;
		}
		
		function setImageName(data){
		
			$.each(data, function(e1, value1){
				console.log(value1);
				$.each(value1[0], function(e2, value2){
					if(e2 == 'name'){
						$('#fileupload').append('<input class="uploadedFileClass" type="hidden" name="uploadedFile[]" value="'+value2+'" />');
					}
				});
			});
		}
		
		$('#fileupload').fileupload('option', {
            maxFileSize: 5000000,
            resizeMaxWidth: 1500,
            resizeMaxHeight: 4000,
            acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i
        });
		
		$('#fileupload').fileupload(
	        'option',
	        'redirect',
	        
	        window.location.href.replace(
	            /\/[^\/]*$/,
	            '/cors/result.html?%s'
	        )
	    );

	    if (window.location.hostname === 'blueimp.github.io') {
	        // Demo settings:
	        $('#fileupload').fileupload('option', {
	            url: '//jquery-file-upload.appspot.com/',
	            // Enable image resizing, except for Android and Opera,
	            // which actually support image resizing, but fail to
	            // send Blob objects via XHR requests:
	            disableImageResize: /Android(?!.*Chrome)|Opera/
	                .test(window.navigator.userAgent),
	            maxFileSize: 5000000,
	            acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i
	        });
	        // Upload server status check for browsers with CORS support:
	        if ($.support.cors) {
	            $.ajax({
	                url: '//jquery-file-upload.appspot.com/',
	                type: 'HEAD'
	            }).fail(function () {
	                $('<div class="alert alert-danger"/>')
	                    .text('Upload server currently unavailable - ' +
	                            new Date())
	                    .appendTo('#fileupload');
	            });
	        }
	    } else {
	        // Load existing files:
	        $('#fileupload').addClass('fileupload-processing');
	        $.ajax({
	            // Uncomment the following to send cross-domain cookies:
	            //xhrFields: {withCredentials: true},
	            url: $('#fileupload').fileupload('option', 'url'),
	            dataType: 'json',
	            context: $('#fileupload')[0]
	        }).always(function () {
	            $(this).removeClass('fileupload-processing');
	        }).done(function (result) {
	            $(this).fileupload('option', 'done')
	                .call(this, null, {result: result});
	           
	        });
	    }

	    $('.createAlbum').click(function(e){
		    e.preventDefault();
		    $('#txtAlbum_message').remove();
		    $('#modalAlbumBox').remove();
		    var that = this;
			$.ajax({
				url : "<?php echo BASE_URL ?>index.php?module=user&act=ajax&albumBox=1",
				success : function(data){
					$('.createAlbum').parent().append(data);
					$('.createAlbum').parent().find('#modalAlbumBox').modal();
				},
			});
		});

	    $('#txtTitle').blur(function(){
	    	$(this).parent().find('.alert').remove();
	    	$.ajax({
	    		url: "index.php?module=user&act=ajax&validateTitle=1",
	    		type: 'POST',
	    		data: {txtTitle: $('#txtTitle').val()},
	    		success: function(data){
	    			newData = $.parseJSON(data);
	    			if(newData.errors){
	    				$('#txtTitle').parent().append('<div id="txtTitle_error" class="alert alert-danger alert-dismissable" style="display: none;"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button><strong>Lỗi!</strong>'+newData.errors.txtTitle+'</div>');
	    				$('#txtTitle_error').slideDown('fast');
	    			}
	    		}
	    	});
	    });

	    $('#txtDescription').blur(function(){
	    	$(this).parent().find('.alert').remove();
	    	$.ajax({
	    		url: "index.php?module=user&act=ajax&validateDescription=1",
	    		type: 'POST',
	    		data: {txtDescription: $('#txtDescription').val()},
	    		success: function(data){
	    			newData = $.parseJSON(data);
	    			if(newData.errors){
	    				$('#txtDescription').parent().append('<div id="txtDescription_error" class="alert alert-danger alert-dismissable" style="display: none;"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button><strong>Lỗi!</strong>'+newData.errors.txtDescription+'</div>');
	    				$('#txtDescription_error').slideDown('fast');
	    			}
	    		}
	    	});
	    });

	    /*
	     * Submit event
	     */
	    $('button#submitImage').click(function(e){
	    	e.preventDefault();
	    	$(".alert").remove();
	    	$('#fileupload').css('opacity', '0.3');
	    	$('#fileupload > button').prop('disabled', true);
			$('.formLoading')
			.css('width', $('#tabUpload').width())
			.css('height', $('#tabUpload').height())
			.css('opacity', '1')
			.css('z-index','999').css('display', 'block');
			$('#wrapLoadMoreItems').css('display', 'block').center();

	    	
	    	var uploadedFile = $('.uploadedFileClass').map(function(){
	            return $(this).val()
	        }).get();
	    	
	    	$.ajax({
	    		url : "<?php echo BASE_URL; ?>index.php?module=user&act=ajax&validatePostImage=1",
	    		type : 'POST',
	    		
	    		data : {
	    			txtTitle: $('#txtTitle').val(), 
	    			txtCat : $('#txtCat').val(),
	    			txtAlbum : $('#txtAlbum').val(),
	    			txtDescription : $('#txtDescription').val(), 
	    			uploadedFile : uploadedFile
	    		},
	    		success : function(data){
	    			$('#fileupload').css('opacity', '1');
	    			$('.formLoading').css('display', 'none');
	    			$('#wrapLoadMoreItems').css('display', 'none');
	    			$('#fileupload > button').prop('disabled', false);
	    			if(data) newData = $.parseJSON(data);
	    			if(newData.errors){
	    				$.each(newData.errors, function(e, error){
		    				if(e != 'error'){
		    					$('#' + e).parent().append('<div id="'+e+'_error" class="alert alert-danger alert-dismissable" style="display: none;"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>'+error+'</div>');
		    					$('#' + e + '_error').slideDown('fast');
		    				}
	    				});
	    			}else{
		    			popupMessage('Thành công', <?= json_encode(array('Đăng bài thành công.')); ?>, 'alert-success');
		    			$('#popup_message').prepend('<div class="loading" id="mainLoading"><div id="loadMoreItems" class="normalLoadBtn"><img width="20" src="public/images/loading.gif" alt="loading" /> Loading </div><div class="clr"></div></div>');
		    			$('#mainLoading').delay(1500).slideUp(function(){
							window.location.href = '<?= UPLOAD ?>/image';
			    		});
		    			
		    			
		    			
			    		
	    				
	    			}
	    		}
	    	});
	    });

	   
	    
	 
		$('#txtAlbum').select2({ width: '250' });

	});
</script>
<!-- The template to display files available for download -->
<script id="template-download" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
    <tr class="template-download fade">
        <td>
            <span class="preview">
                {% if (file.thumbnailUrl) { %}
                    <a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" data-gallery><img src="{%=file.thumbnailUrl%}"></a>
                {% } %}
            </span>
        </td>
        <td>
	
            <p class="name">
                {% if (file.url) { %}
                    <a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" {%=file.thumbnailUrl?'data-gallery':''%}>{%=file.name%}</a>
                {% } else { %}
                   <span>{%=file.name%}</span>
                {% } %}
            </p>
			
            {% if (file.error) { %}
                <div><span class="label label-danger">Error</span> {%=file.error%}</div>
            {% } %}
        </td>
        <td>
            <span class="size">{%=o.formatFileSize(file.size)%}</span>
        </td>
        <td>
            {% if (file.deleteUrl) { %}
                <button class="btn btn-danger delete" data-type="{%=file.deleteType%}" data-url="{%=file.deleteUrl%}"{% if (file.deleteWithCredentials) { %} data-xhr-fields='{"withCredentials":true}'{% } %}>
                    <i class="glyphicon glyphicon-trash"></i>
                    <span>Delete</span>
                </button>
                <input type="checkbox" name="delete" value="1" class="toggle">
            {% } else { %}
                <button class="btn btn-warning cancel">
                    <i class="glyphicon glyphicon-ban-circle"></i>
                    <span>Cancel</span>
                </button>
            {% } %}
        </td>
    </tr>
{% } %}
</script>


<script src="public/exts/js/jqueryupload/vendor/jquery.ui.widget.js"></script>
<!-- The Templates plugin is included to render the upload/download listings -->
<script src="public/exts/js/jqueryupload/blueimp.js"></script>

<!-- blueimp Gallery script -->

<!-- The Iframe Transport is required for browsers without support for XHR file uploads -->
<script src="public/exts/js/jqueryupload/jquery.iframe-transport.js"></script>
<!-- The basic File Upload plugin -->
<script src="public/exts/js/jqueryupload/jquery.fileupload.js"></script>
<!-- The File Upload processing plugin -->
<script src="public/exts/js/jqueryupload/jquery.fileupload-process.js"></script>
<!-- The File Upload image preview & resize plugin -->
<script src="public/exts/js/jqueryupload/jquery.fileupload-image.js"></script>

<!-- The File Upload validation plugin -->
<script src="public/exts/js/jqueryupload/jquery.fileupload-validate.js"></script>
<!-- The File Upload user interface plugin -->

<script src="public/exts/js/jqueryupload/jquery.fileupload-ui.js"></script>